<template>
  <div id="" class="rentPrice">
    <ul>
      <li v-for="(rentprice,index) in rentPriceArr"
      :key="rentprice.key"
      :class="{'active':index==rentIdx}"
      @click="setActive(index)">
        {{rentprice.rentPrice}}
      </li>
    </ul>
    <div class="rangeDiv">
      <p>0元~10000元</p>
      <div class="rangebox">
        <span class="range rangeLeft">
          <img src="@/assets/images/range@2x.png" width="30" alt="">
        </span>
        <span class="range rangeRight">
          <img src="@/assets/images/range@2x.png" width="30" alt="">
        </span>
      </div>
    </div>
    <button type="button" name="button" class="blockBtn">确定</button>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    rentPriceArr:[
      {
        rentPrice:'不限',
        rentMoneyStart:'',    //最低租金
        rentMoneyEnd:'',      //最高租金
        rentId:0
      },
      {
        rentPrice:'1000元以下',
        rentMoneyStart:0,
        rentMoneyEnd:100000,
        rentId:1
      },
      {
        rentPrice:'1000-1500元',
        rentMoneyStart:100000,
        rentMoneyEnd:150000,
        rentId:2
      },
      {
        rentPrice:'1500-2000元',
        rentMoneyStart:150000,
        rentMoneyEnd:200000,
        rentId:2
      },
      {
        rentPrice:'2000-2500元',
        rentMoneyStart:200000,
        rentMoneyEnd:250000,
        rentId:3
      },
    ],
    rentIdx:0,
  }),
  methods: {
    setActive(index) {
      var that = this;
      that.rentIdx = index;
      var rentPriceArr = that.rentPriceArr;
      that.$emit('rentPriceEvnet',{
        rentPrice:rentPriceArr[index]
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.rentPrice{
  background: white;
  text-align: center;
  li{
    padding: 10px 0;
    &.active{
      color: $greenColor;
    }
  }
}
.rangeDiv{
  border-top: 1px solid $borderColor;
  padding: 10px 0;
  .rangebox{
    width: 60%;
    height: 3px;
    background: $greenColor;
    display: inline-block;
    margin: 30px 0;
    position: relative;
    .range{
      position: absolute;
      left: -5px;
      top: -15px;
      &.rangeRight{
        left: auto;
        right: -5px;
      }
    }
  }
}
.blockBtn{
  border-radius: 0;
}
</style>
